<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>友情链接展示 - Bootstrap示例</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #0d6efd;
            --secondary: #6c757d;
            --light: #f8f9fa;
            --dark: #212529;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            line-height: 1.6;
            background-color: #f5f7fa;
            color: var(--dark);
            padding-top: 3rem;
            padding-bottom: 5rem;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 1rem;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--primary);
        }
        
        .link-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 2rem;
            margin-bottom: 3rem;
        }
        
        .link-category {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
        }
        
        .link-category h3 {
            font-size: 1.4rem;
            color: var(--primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 基础文本链接样式 */
        .basic-links a {
            display: inline-block;
            color: var(--secondary);
            text-decoration: none;
            margin: 0.5rem 1rem 0.5rem 0;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        .basic-links a:hover {
            color: var(--primary);
            background-color: rgba(13, 110, 253, 0.1);
        }
        
        /* 带图标链接样式 */
        .icon-links a {
            display: inline-flex;
            align-items: center;
            color: var(--secondary);
            text-decoration: none;
            margin: 0.5rem 1.5rem 0.5rem 0;
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            transition: var(--transition);
            gap: 6px;
        }
        
        .icon-links a:hover {
            color: var(--primary);
            background-color: rgba(13, 110, 253, 0.1);
            transform: translateY(-2px);
        }
        
        /* 卡片式链接样式 */
        .card-links {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
        }
        
        .link-card {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
            transition: var(--transition);
            text-decoration: none;
            color: var(--dark);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .link-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            border-color: var(--primary);
        }
        
        .link-logo {
            width: 60px;
            height: 60px;
            object-fit: contain;
            margin-bottom: 0.8rem;
            border-radius: 4px;
        }
        
        .link-name {
            font-weight: 500;
            margin-bottom: 0.3rem;
        }
        
        .link-desc {
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        /* 带分类的链接样式 */
        .category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        
        .category-box {
            background-color: var(--light);
            border-radius: 8px;
            padding: 1.2rem;
        }
        
        .category-box h4 {
            font-size: 1.1rem;
            margin-bottom: 1rem;
            color: var(--primary);
            padding-bottom: 0.5rem;
            border-bottom: 2px solid rgba(13, 110, 253, 0.2);
        }
        
        .category-box ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .category-box li {
            margin-bottom: 0.6rem;
        }
        
        .category-box a {
            color: var(--secondary);
            text-decoration: none;
            transition: var(--transition);
            display: block;
            padding: 0.2rem 0;
        }
        
        .category-box a:hover {
            color: var(--primary);
            padding-left: 5px;
        }
        
        /* 图片链接样式 */
        .image-links {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }
        
        .image-link {
            display: block;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 0.8rem;
            transition: var(--transition);
            background-color: white;
        }
        
        .image-link:hover {
            transform: scale(1.05);
            border-color: var(--primary);
            box-shadow: var(--shadow);
        }
        
        .image-link img {
            height: 60px;
            object-fit: contain;
        }
        
        /* 申请链接区域 */
        .apply-section {
            text-align: center;
            padding: 2rem;
            background-color: rgba(13, 110, 253, 0.05);
            border-radius: 8px;
            margin-top: 2rem;
        }
        
        .apply-section p {
            max-width: 600px;
            margin: 0 auto 1.5rem;
            color: var(--secondary);
        }
        
        .btn-apply {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.7rem 2rem;
            border-radius: 30px;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .btn-apply:hover {
            background-color: #0b5ed7;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .link-section {
                padding: 1.5rem;
            }
            
            .card-links {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .category-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="section-title">友情链接展示</h2>
        
        <!-- 基础文本链接样式 -->
        <div class="link-section">
            <div class="link-category">
                <h3><i class="fas fa-link"></i> 基础文本链接</h3>
                <div class="basic-links">
                    <a href="#" target="_blank">腾讯网</a>
                    <a href="#" target="_blank">新浪网</a>
                    <a href="#" target="_blank">网易</a>
                    <a href="#" target="_blank">百度</a>
                    <a href="#" target="_blank">阿里巴巴</a>
                    <a href="#" target="_blank">京东</a>
                    <a href="#" target="_blank">拼多多</a>
                    <a href="#" target="_blank">字节跳动</a>
                    <a href="#" target="_blank">美团</a>
                    <a href="#" target="_blank">滴滴出行</a>
                    <a href="#" target="_blank">小红书</a>
                    <a href="#" target="_blank">哔哩哔哩</a>
                    <a href="#" target="_blank">知乎</a>
                    <a href="#" target="_blank">豆瓣</a>
                    <a href="#" target="_blank">快手</a>
                </div>
            </div>
        </div>
        
        <!-- 带图标链接样式 -->
        <div class="link-section">
            <div class="link-category">
                <h3><i class="fas fa-icons"></i> 带图标链接</h3>
                <div class="icon-links">
                    <a href="#" target="_blank"><i class="fab fa-weibo"></i> 新浪微博</a>
                    <a href="#" target="_blank"><i class="fab fa-weixin"></i> 微信公众平台</a>
                    <a href="#" target="_blank"><i class="fab fa-qq"></i> QQ空间</a>
                    <a href="#" target="_blank"><i class="fab fa-tiktok"></i> 抖音</a>
                    <a href="#" target="_blank"><i class="fab fa-zhihu"></i> 知乎</a>
                    <a href="#" target="_blank"><i class="fab fa-bilibili"></i> B站</a>
                    <a href="#" target="_blank"><i class="fas fa-shopping-cart"></i> 淘宝</a>
                    <a href="#" target="_blank"><i class="fas fa-gamepad"></i> 腾讯游戏</a>
                    <a href="#" target="_blank"><i class="fas fa-music"></i> 网易云音乐</a>
                    <a href="#" target="_blank"><i class="fas fa-film"></i> 爱奇艺</a>
                    <a href="#" target="_blank"><i class="fas fa-book"></i> 微信读书</a>
                    <a href="#" target="_blank"><i class="fas fa-utensils"></i> 美团外卖</a>
                </div>
            </div>
        </div>
        
        <!-- 卡片式链接样式 -->
        <div class="link-section">
            <div class="link-category">
                <h3><i class="fas fa-th-large"></i> 卡片式链接</h3>
                <div class="card-links">
                    <a href="#" target="_blank" class="link-card">
                        <img src="https://picsum.photos/seed/site1/60/60" alt="科技资讯网" class="link-logo">
                        <div class="link-name">科技资讯网</div>
                        <div class="link-desc">最新科技动态</div>
                    </a>
                    <a href="#" target="_blank" class="link-card">
                        <img src="https://picsum.photos/seed/site2/60/60" alt="设计家园" class="link-logo">
                        <div class="link-name">设计家园</div>
                        <div class="link-desc">创意设计分享</div>
                    </a>
                    <a href="#" target="_blank" class="link-card">
                        <img src="https://picsum.photos/seed/site3/60/60" alt="程序员社区" class="link-logo">
                        <div class="link-name">程序员社区</div>
                        <div class="link-desc">技术交流平台</div>
                    </a>
                    <a href="#" target="_blank" class="link-card">
                        <img src="https://picsum.photos/seed/site4/60/60" alt="旅游攻略" class="link-logo">
                        <div class="link-name">旅游攻略</div>
                        <div class="link-desc">全球旅行指南</div>
                    </a>
                    <a href="#" target="_blank" class="link-card">
                        <img src="https://picsum.photos/seed/site5/60/60" alt="美食天下" class="link-logo">
                        <div class="link-name">美食天下</div>
                        <div class="link-desc">美食菜谱分享</div>
                    </a>
                    <a href="#" target="_blank" class="link-card">
                        <img src="https://picsum.photos/seed/site6/60/60" alt="健身达人" class="link-logo">
                        <div class="link-name">健身达人</div>
                        <div class="link-desc">健康生活方式</div>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 带分类的链接样式 -->
        <div class="link-section">
            <div class="link-category">
                <h3><i class="fas fa-tags"></i> 分类链接</h3>
                <div class="category-grid">
                    <div class="category-box">
                        <h4>社交平台</h4>
                        <ul>
                            <li><a href="#" target="_blank">微信</a></li>
                            <li><a href="#" target="_blank">微博</a></li>
                            <li><a href="#" target="_blank">QQ</a></li>
                            <li><a href="#" target="_blank">抖音</a></li>
                            <li><a href="#" target="_blank">快手</a></li>
                        </ul>
                    </div>
                    
                    <div class="category-box">
                        <h4>电商平台</h4>
                        <ul>
                            <li><a href="#" target="_blank">淘宝</a></li>
                            <li><a href="#" target="_blank">京东</a></li>
                            <li><a href="#" target="_blank">拼多多</a></li>
                            <li><a href="#" target="_blank">唯品会</a></li>
                            <li><a href="#" target="_blank">苏宁易购</a></li>
                        </ul>
                    </div>
                    
                    <div class="category-box">
                        <h4>资讯媒体</h4>
                        <ul>
                            <li><a href="#" target="_blank">腾讯新闻</a></li>
                            <li><a href="#" target="_blank">新浪新闻</a></li>
                            <li><a href="#" target="_blank">网易新闻</a></li>
                            <li><a href="#" target="_blank">今日头条</a></li>
                            <li><a href="#" target="_blank">凤凰新闻</a></li>
                        </ul>
                    </div>
                    
                    <div class="category-box">
                        <h4>娱乐平台</h4>
                        <ul>
                            <li><a href="#" target="_blank">爱奇艺</a></li>
                            <li><a href="#" target="_blank">腾讯视频</a></li>
                            <li><a href="#" target="_blank">优酷</a></li>
                            <li><a href="#" target="_blank">哔哩哔哩</a></li>
                            <li><a href="#" target="_blank">芒果TV</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图片链接样式 -->
        <div class="link-section">
            <div class="link-category">
                <h3><i class="fas fa-image"></i> 图片链接</h3>
                <div class="image-links">
                    <a href="#" target="_blank" class="image-link">
                        <img src="https://picsum.photos/seed/brand1/180/60" alt="品牌合作伙伴1" class="img-fluid">
                    </a>
                    <a href="#" target="_blank" class="image-link">
                        <img src="https://picsum.photos/seed/brand2/180/60" alt="品牌合作伙伴2" class="img-fluid">
                    </a>
                    <a href="#" target="_blank" class="image-link">
                        <img src="https://picsum.photos/seed/brand3/180/60" alt="品牌合作伙伴3" class="img-fluid">
                    </a>
                    <a href="#" target="_blank" class="image-link">
                        <img src="https://picsum.photos/seed/brand4/180/60" alt="品牌合作伙伴4" class="img-fluid">
                    </a>
                    <a href="#" target="_blank" class="image-link">
                        <img src="https://picsum.photos/seed/brand5/180/60" alt="品牌合作伙伴5" class="img-fluid">
                    </a>
                    <a href="#" target="_blank" class="image-link">
                        <img src="https://picsum.photos/seed/brand6/180/60" alt="品牌合作伙伴6" class="img-fluid">
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 申请友情链接区域 -->
        <div class="apply-section">
            <h3>申请友情链接</h3>
            <p>如果您希望与我们交换友情链接，请点击下方按钮联系我们。我们会在24小时内审核您的申请并给予回复。</p>
            <button class="btn-apply">
                <i class="fas fa-handshake"></i> 申请交换链接
            </button>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 友情链接交互效果增强
        document.addEventListener('DOMContentLoaded', function() {
            // 为所有链接添加新窗口打开提示
            const allLinks = document.querySelectorAll('a[target="_blank"]');
            allLinks.forEach(link => {
                // 添加提示 title
                if (!link.title) {
                    link.title = '在新窗口打开: ' + (link.textContent.trim() || link.href);
                }
            });
            
            // 申请链接按钮点击事件
            document.querySelector('.btn-apply').addEventListener('click', function() {
                alert('友情链接申请已收到！我们将尽快审核并与您联系。\n\n请准备好您的网站名称、URL和Logo（可选）。');
            });
            
            // 为卡片式链接添加加载动画效果
            const cardLinks = document.querySelectorAll('.link-card');
            cardLinks.forEach(card => {
                card.addEventListener('click', function(e) {
                    // 在实际应用中，可以在这里添加加载状态
                    const originalText = this.querySelector('.link-name').textContent;
                    this.querySelector('.link-name').textContent = '加载中...';
                    
                    // 模拟加载延迟
                    setTimeout(() => {
                        this.querySelector('.link-name').textContent = originalText;
                    }, 500);
                });
            });
        });
    </script>
</body>
</html>
    
